<template>
  <!-- 为所有的Element Plus子组件提供统一的配置 -->
  <el-config-provider :locale="locale" :size="size">
    <!-- 会去找layouts中的default.vue,NuxtPage对应的页面就是default.vue中的slot -->
    <NuxtLayout>
      <!-- 会去找pages中的index.vue -->
      <NuxtPage />
    </NuxtLayout>
  </el-config-provider>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { storeToRefs } from "pinia";
import { messages } from "@/i18n";
// 定义在composables/store中,处理整个应用的状态
const appStore = useStore.appStore();
// 从Pinia状态管理获取组件尺寸和主题配置
const { componentSize, theme }: any = storeToRefs(appStore);
// 计算属性：组件尺寸
const size = computed(() => componentSize.value);
// 计算属性：国际化语言包
const locale = computed(() => messages[appStore.language].el);
// 页面加载后处理主题样式
onMounted(() => {
  // 异步执行，等待页面Dom加载完成后再处理
  nextTick(() => {
    // utils中定义的方法，用于处理主题样式
    handleThemeStyle(theme.value);
  });
});
</script>
